<template>
    <el-table :data="tableData" border v-loading="tableloading">
        <el-table-column 
        v-for="item in columns" 
        :label="item.label" 
        :prop="item.prop"
        :width="item.width"
        :align="item.align?item.align:'center'">
        <template v-slot="{row}">
            <slot :name="item.prop" :row="row">
                {{getProp(row,item)}}
            </slot>
        </template>
    </el-table-column>

    </el-table>
</template>
<script setup>
let props = defineProps({
    tableData: {
        type: Array,
        defort() {
            return []
        }
    },
    columns: {
        type: Array
    },
    tableloading: {
        type: Boolean,
        defort() {
            return false
        }
    },

})
let getProp = (row, item) => {
    // console.log(item.prop)
    let reg = /^(.+)\[(\d+)\]\.?(.*)$/
    let matched = item.prop.match(reg)
    if (matched) {
        let arr = row[matched[1]]
        let prop = arr[matched[2]]
        let prop2 = prop[matched[3]]
        return prop2
    }
    return row[item.prop]
}

</script>
<style scoped>



</style>